<template>
	<div class="PcCart">
		<span class="header"><i class="el-icon-shopping-cart-1"></i>我的购物车</span>
		<div class="box2">
		<template>
		  <el-table
		    :data="carts"
		    border
		    style="width: 100%;margin: 0 auto;" >
		    <el-table-column label="复选款" width="80px">
				<template slot-scope ="scope">
					 <input  type="checkbox" v-model="checked" :value="scope.row.id" @change="checkOne()"/>
				</template>
		    </el-table-column>
		    <el-table-column label="图片" >
		     <template slot-scope="scope" >
		    		<el-image
		    		      style="width: 80px; height: 100px "
		    		      :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`">
		    		</el-image>
		      </template>
		    </el-table-column>
		   <el-table-column
		     prop="book.name"
		     label="商品描述"
		     >
		   </el-table-column>
		   <el-table-column
		     prop="price"
		     label="商品价钱"
		     >
		   </el-table-column>
		   <el-table-column label="数量" >
			 <template slot-scope="scope">
			   <el-input-number v-model="scope.row.num" @change="handleChange(scope.row.id)" :min="1"></el-input-number>
			 </template>
		   </el-table-column>
		   <el-table-column
		     prop="sum"
		     label="总金额"
		     >
		   </el-table-column>
		  </el-table>
		</template>
		<div class="box1">
			<aside class="as">
				<input type="checkbox" v-model="checkAll" @change="addAll()"/>
				<span>全选</span>
			</aside>
			<aside class="as2">
				<span>总价：￥{{sum}}</span>
				<button @click="addRate()">去下单</button>
			</aside>
	   </div>
   </div>
</div>	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	export default {
		name:'PcCart',
		data() {
			return{
			checkAll:false,
			carts:[],
			checked:[],
			sum:0,
			}
		},
		methods:{
			...mapActions('order',['actionHistory','delHistory']),
			addAll(){
				if(this.checkAll){
					this.carts.forEach((item)=>{
						this.checked.push(item.id);
					})
					this.checked = Array.from(new Set(this.checked));
				}else{
					this.checked=[];
				}
				this.sumPrice();
			},
			sumPrice(){
				let sum = 0;
				this.checked = Array.from(new Set(this.checked));
					this.checked.forEach((item)=>{
					let n=	this.carts.findIndex(index => index.id == item)
						sum += this.carts[n].sum;	
					})
					this.sum = sum;
			},
			handleChange(id){
				this.carts.forEach((item)=>{
					item.sum = item.num*item.price;
				})
				this.checked.push(id);
				this.checkOne();
				this.sumPrice();
			},
			checkOne(){
				console.log(this.checked);
				this.checked = Array.from(new Set(this.checked));
				this.checkAll = this.checked.length == this.carts.length?true:false;
				this.sumPrice();
			},
			find(num){
				let bool = false;
				this.orders.forEach((item)=>{
					if(item.id == this.carts[num].id){
						bool = true;
						return;
					}
				})
				return bool;
			},
			addRate(){
				if(this.checked.length == 0){
					this.$message({
						message:'请选择商品',
						type:'error',
					})
					return;
				}
				this.delHistory();
				this.checked.forEach((item)=>{
					let n = this.carts.findIndex(obj => obj.id == item);
					console.log('n='+n);
					console.log(this.find(n))
					if(!this.find(n)){
						let m = this.carts[n];
						this.actionHistory({
							checked:true,
							id:m.id,
							num:m.num,
							sum:m.sum,
							price:m.price,
							book:{
								id:m.book.id,
								name:m.book.name,
								pic:m.book.pic,
							}
						  })
					}	
				})
				this.$router.push({
					path:'/pc/order'
				})
			}
		},
		computed:{
			...mapState('order',['orders'])
		},
		mounted() {
			this.$get('/api/fore/cart/findMyCarts').then((resp)=>{
				this.carts = resp.data.data;
				this.carts.forEach((item)=>{
					item.sum = item.price*item.num;
				})
				console.log(this.carts);
			})
		}
	}
</script>

<style scoped>
	.header{
		font-size: 30px;
	}
	.PcCart{
		text-align: center;
		width: 80%;
		margin: 50px auto;
	}
	.box1{
		width: 100%;
		height: 50px;
		display: flex;
		line-height: 50px;
		justify-content: space-between;
	}
	.box2{
		width: 100%;
		border: 2px solid gainsboro;
	}
	.as{
		height: 100%;
		margin-left: 10px;
	}
	.as2{
		width: 300px;
		height: 100%;
		
	}
	.as2 button{
		margin-left: 50px;
		width: 150px;
		border: none;
		height: 40px;
		background-color: #f56c6c;
		border-radius: 5px;
		color: white;
	}
</style>